<template>
  <div class="touzilist">
    <el-card>
      <el-row :gutter="10" class="elrow">
        <el-col :span="2">
          <el-tag>课程名</el-tag>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入课程名" v-model="formData.cname" maxlength="18"></el-input>
        </el-col>
        <el-col :span="2">
          <el-tag>课程类型</el-tag>
        </el-col>
        <el-col :span="4">
          <el-select v-model="formData.level" clearable placeholder="请选择课程类型">
            <el-option value="1" label="专升本"></el-option>
            <el-option value="2" label="高起专"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-tag>学习方式</el-tag>
        </el-col>
        <el-col :span="4">
          <el-select v-model="formData.cway" clearable placeholder="请选学习方式">
            <el-option value="1" label="函授"></el-option>
            <el-option value="2" label="业余"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" v-on:click="getTabsList">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="updateKey" style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column label="课程名称" align="center" width="180">
            <template slot-scope="scope">
          <span v-if="scope.row.edit">
            <el-input v-model="scope.row.cname" size="small"></el-input>
          </span>
              <span v-else>{{scope.row.cname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程图片" align="center" width="180">
            <template slot-scope="scope">
          <span v-if="scope.row.img == ''">
            <el-image
              class="table-td-thumb"
              style="width: 80px; height: 80px"
              src="http://localhost:8080/CourseHead/zwtp.png"
            ></el-image>
          </span>
              <span v-else>
            <el-image
              class="table-td-thumb"
              style="width: 80px; height: 80px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
            ></el-image>
          </span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="180">
            <template slot-scope="scope">
              <span style="color:rgb(0, 208, 83)">{{scope.row.cdate  | dataFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程价格" align="center" width="180">
            <template slot-scope="scope">
            <span v-if="scope.row.edit">
              <el-input v-model="scope.row.cvalue" size="small"></el-input>
            </span>
              <span v-else>
              <el-tag size="medium">￥{{ scope.row.cvalue}}</el-tag>
            </span>
            </template>
          </el-table-column>
          <el-table-column label="课程学时" align="center" width="150">
            <template slot-scope="scope">
            <span v-if="scope.row.edit">
              <el-input v-model="scope.row.chour" size="small"></el-input>
            </span>
              <span v-else>{{ scope.row.chour}}学时</span>
            </template>
          </el-table-column>
          <el-table-column label="课程容量" align="center" width="150">
            <template slot-scope="scope">
            <span v-if="scope.row.edit">
              <el-input v-model="scope.row.cnum" size="small"></el-input>
            </span>
              <span v-else>{{ scope.row.cnum}}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程层次" align="center" width="110">
            <template slot-scope="scope">
            <span v-if="scope.row.edit">
              <el-select v-model="scope.row.level" placeholder="请选择" >
                <el-option label="1-专升本":value="1"></el-option>
                <el-option label="2-高起专":value="2"></el-option>
                <el-option label="3-高升专":value="3"></el-option>
              </el-select>
            </span>
              <!--专升本-->
              <span v-if=" scope.row.level==='1'&& !scope.row.edit">专升本课程</span>
              <span v-else-if="scope.row.level==='2'&& !scope.row.edit">高升本课程</span>
              <span v-else-if="!scope.row.edit">高升专课程</span>
            </template>
          </el-table-column>
          <el-table-column label="面向类型" align="center" width="110">
            <template slot-scope="scope">
            <span v-if="scope.row.edit">
              <el-select v-model="scope.row.cway" placeholder="请选择">
                <el-option label="1-函授":value="1"></el-option>
                <el-option label="2-业余":value="2"></el-option>
              </el-select>
            </span>
              <span v-else-if="scope.row.cway=='1'">函授</span>
              <span v-else>业余</span>
            </template>
          </el-table-column>
          <el-table-column label="课程审核状态" align="center" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.isverify=='1'">已审核</span>
              <span v-else="scope.row.isverify==0" style="color: #fc0d6f">
               <el-button  size="mini" type="danger" circle>未审核</el-button>
            </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160px" >
            <template slot-scope="scope">
              <el-button v-if="scope.row.edit" type="success" size="mini" @click="handleSave(scope.$index,scope.row)">保存</el-button>
              <el-button v-else type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
              <el-tooltip v-if="scope.row.img === ''" class="item" effect="dark" content="上传图片" placement="top-start">
                <el-button size="mini"  icon="el-icon-picture-outline-round" circle @click="handleUpload(scope.row,scope.$index)">  </el-button>
              </el-tooltip>
              <el-tooltip v-else  class="item" effect="dark" content="删除图片" placement="top-start">
                <el-button size="mini" type="danger" icon="el-icon-picture-outline-round" circle @click="deletePic(scope.row,scope.$index)">  </el-button> 
              </el-tooltip>   
              <el-tooltip class="item" effect="dark" content="删除课程" placement="top-start">
                <el-button  size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index,scope.row)"></el-button>   
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div style="text-align: center;margin-top: 30px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagesize"
          :total="total"
          :current-page="currentPage"
          @current-change="current_change">
        </el-pagination>
    </div>
    </el-card>
    <div>
      <el-dialog title="图片上传" :visible.sync="dialogFormVisible" width="50%" >
        <el-upload
          class="el-upload"
          ref="upload"
          :auto-upload="false"
          action="http://localhost:8080/uploadImage"
          list-type="picture-card"
          :limit="1"
          :file-list="fileList"
          :on-exceed="onExceed"
          :before-upload="beforeUpload"
          :on-preview="handlePreview"
          :on-success="handleSuccess"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" width="60%">
          <el-image style="width: 500px; height: 500px" :src="dialogImageUrl" alt="" class="table-td-thumb"></el-image>
        </el-dialog>
        <template #footer>
                <span class="dialog-footer">
                  <el-button type="primary" v-on:click="savePic">确 定</el-button>
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";

  export default {
    data() {
      return {
        index: 0,
        limit: 1,
        imagurl: '',
        dialogFormVisible: false,
        rowtemp: [],
        //文件上传的参数
        cid: '',
        dialogImageUrl: '',
        dialogVisible: false,
        //图片列表（用于在上传组件中回显图片）
        fileList: [],
        updateKey: 0,
        tableData: [],
        baseimgurl:"http://localhost:8080/CourseHead/zwtp.png",
        formData: {
          cname: '',
          level: '',
          cway: ''
        },
        total: 0,
        pagesize: 4,
        currentPage:1,
        tid: sessionStorage.getItem("uid")
      };
    },
    methods: {
      handleUpload(row,index){
        this.index = index;
        this.dialogFormVisible = true;
        this.cid = row.cid;
        this.rowtemp =row;
      },
      savePic(){
        this.$refs.upload.submit();
      },
      deletePic(row,index){
        this.$axios
        .get("/deleteCoursePic",{
          params:{
            cid: row.cid,
            url: row.img
          }
        }).then(res =>{
          if(res.data.code === 200){
              this.$message({
              type: "success",
              message: "删除成功"
            });
            row.img = '';
            this.updateKey = Math.random();
          }else{
            this.$message({
              type: "error",
              message: "删除失败"
            });
          }
        })
      },
      handleSuccess(res, file) {
        console.log(res);
        if(res !==''){
          this.imageURL = res;
          this.$message({
            type: 'success',
            message: '图片上传成功',
            duration: 6000
          });
          this.fileList = [];
          this.$axios.get("/insertPic",{
            params:{
              url: res,
              cid: this.cid
            }
          })
          this.rowtemp.img = res;
          Vue.set(this.tableData,this.index,this.rowtemp);
          this.dialogFormVisible = false;
          this.updateKey = Math.random();
        }else {
          this.$message({
            type: 'error',
            message: '图片上传失败',
            duration: 6000
          });
          this.dialogFormVisible = false;
        }
      },
      //删除文件之前的钩子函数
      handleRemove(file, fileList) {
        this.$message({
          type: 'info',
          message: '已删除原有图片',
          duration: 6000
        });
      },
      //上传的文件个数超出设定时触发的函数
      onExceed(files, fileList) {
        this.$message({
          type: 'info',
          message: '最多只能上传一个图片',
          duration: 6000
        });
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //文件上传前的前的钩子函数
      //参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isGIF = file.type === 'image/gif';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
      },
      current_change(val){
        this.currentPage = val;
        // console.log(this.tableData);
      },
      getTabsList() {
        this.$axios
          .get("/queryteachercourse", {
            params:{
              tid: sessionStorage.getItem("uid")
            }
          })
          .then(res => {
            //			console.log(res)
            const data = res.data;
            this.tableData = data.data;
            this.total = res.data.data.length;
            console.log(this.tableData)
          });
      },
      handleEdit(index,row) {
        row.edit =  true;
        this.updateKey = Math.random();
      },
      handleSave(index,row) {
        this.$confirm("确认修改课程信息, 是否继续?", "提示", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning"
        })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            // 后端数据操作
            this.$axios
              .post("/updatecourse",row)
              .then(res =>{

              })
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.updateKey = Math.random();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取修改"
            });
          });
        row.edit =  false;
      },
      handleCancel(index,row){
        row.edit = false;
      },
      handleDelete(index,row){
        this.$confirm("永久删除该课程, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            this.tableData.splice(index, 1);
            this.$axios.get("/deletecourse", {
              params:{
                cid: row.cid
              }
            })
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.updateKey = Math.random();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        row.edit = false;
      }
    },
    mounted() {
      this.getTabsList();
    }
  }
</script>

<style scoped>
  .touzilist {
    margin: 10px;
  }
  .elrow{
    margin-bottom: 20px;
  }

  .el-input__inner {
    height: 33px;
    font-size: 13px;

  }

  .el-input__inner:hover {
    border-color: #e9e9e9;
  }

  .el-input__inner:focus {
    border-color: #42a5f5;
    box-shadow: none;
    transition-duration: .5s;
  }

  .el-input__inner::-webkit-input-placeholder {
    line-height: 20px;
  }

</style>
